<script lang="ts" setup>
import { ref } from 'vue';
import LoginModal from '../views/LoginModal.vue';
import { imageEmits, type TabsPaneContext } from 'element-plus';
import { useRouter } from 'vue-router'; 
import axios from 'axios';

const router = useRouter(); // 获取路由实例


// const searchText = ref(''); // 搜索框内容
const isLogin = ref(false); // 是否登录
const showLoginModal = ref(false); // 是否显示登录弹窗
const currentUsername = ref(''); // 当前登录用户名
// const activeName = ref('first')   //导航
// const searchResult = ref([]); // 搜索结果


// const handleSearchClick = async () => {  //搜索×××××××××
//   let res = await axios.get(`api/clothes/getClothesByName/${searchText.value}`);
//   console.log(res);
//   searchResult.value = res.data ;
  
// };

const handleLoginClick = () => {  // 处理登录点击事件
  showLoginModal.value = true;
};

const handleLogout = () => { // 处理退出登录事件
  isLogin.value = false;
  currentUsername.value = '';
};

const handleLoginSuccess = (userInfo: { username: string }) => { // 处理登录成功事件
  isLogin.value = true;
  currentUsername.value = userInfo.username;
};

const handleCloseModal = () => { // 处理关闭弹窗事件
  showLoginModal.value = false;
};


// 处理导航点击事件


const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


const inputVal = ref(''); // 搜索框本地输入值（避免直接修改 Pinia 状态）


// 手动提交搜索
const handleSearch = () => {
  if (!inputVal.value) return; // 空值不搜索
  router.push({ //跳转搜索结果页
    name: 'detail' ,
    params: { keyword: inputVal.value }
  });
  handleClear()
};

// 清空搜索框
const handleClear = () => {
  inputVal.value = '';
};


</script>

<template>
  <el-affix :offset="0">
    <div class="top">
      <div class="left">ysx服装</div>
      <div class="center">
        <input type="text" placeholder="请输入搜索内容" v-model="inputVal">
        <button @click="handleSearch">搜索</button>
      </div>
      <div class="right">
        <div>
          <span class="home" @click="router.push('/')">首页</span>
          <span class="user" @click="router.push('/user')">{{ isLogin ? currentUsername : '用户中心' }}</span>
          <span class="login" @click="handleLoginClick" v-if="!isLogin">登录/注册</span>
          <span class="register" @click="handleLogout" v-else>退出</span>
        </div>
      </div>
    </div>
  </el-affix>
  <!--弹窗-->
  <LoginModal v-if="showLoginModal" @close="handleCloseModal" @loginSuccess="handleLoginSuccess" />
  <!--导航-->
  <div class="navigation" >
    <ul class="nav-ul">
      <li @click="router.push('/')">首页</li>
      <li @click="router.push('/wedding')" >婚纱</li>
      <li @click="router.push('/manSuit')">男士西装</li>
      <li @click="router.push('/childDress')">儿童礼服</li>
    </ul>
    
  </div>
</template>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.left {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.center {
  margin-left: 100px;
  display: flex;
  align-items: center;
  width: 40%;
}

.center input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.center button {
  padding: 8px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 14px;
}

.center button:hover {
  background-color: #66b1ff;
}

.right {
  display: flex;
  align-items: center;
}

.right span {
  margin-left: 20px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
}

.right span:hover {
  color: #409eff;
}

.nav-ul{
  display: flex;
  margin-left: 38%;
}

.nav-ul li{
  padding: 10px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  list-style-type: none;
}
.nav-ul li:hover{
  padding: 10px;
  cursor: pointer;
  color:rgba(255, 0, 0, 0.5);
  border-radius: 5%;
  background-color: rgba(255, 234, 5, 0.512);
  font-size: 14px;
  list-style-type: none;
}
</style>